<template>
	<div style="margin-bottom: 10%;">
		<div style="display: flex; justify-content: space-around;">
			<p style="font-weight: bold;">学生管理-<span style="color: red;">{{data.actmsg[data.state]}}</span></p>
			<p><button  style="color: blue;" @click="back()">返回主页</button></p>
			<p><button style="color: blue;" @click="go2Add()">添加</button></p>
		</div>
		<div style="width: 80% ; border: blue 1px solid">
			学生编号:<input type="text" v-model="data.stu.uid" readonly>
			<hr>
			学生姓名:<input type="text" v-model="data.stu.uname" :readonly="data.state == 2">
			<hr>
			学生电话:<input type="text" v-model="data.stu.phone" :readonly="data.state == 2">
			<hr>
			学生密码:<input type="text" v-model="data.stu.pwd" :readonly="data.state == 2">
			<hr>

			<div style="width: 100%; height: 8vw;display: flex;justify-content: center;align-items: center;">
				<p><img v-bind:src="pic(data.stu.pic)" style="width: 8vw; height: 8vw;"></p>
				<p v-if="data.state != 2">图片:<input type="file" ref="img" ></p>
			</div>
			<hr>
			学生班级:
				<select v-model="data.stu.clz.clzno">
					<option v-for="c in data.clzs" 
						v-bind:value="c.clzno" 
						v-bind:selected="data.stu.clz.clzno == c.clzno">
						{{c.clzname}}
					</option>
				</select>
			<p style="margin: 0;margin-top: 10px;">
				<button style="width: 100%;height: 120%;" @click="update()" v-show="data.state==0">修改</button>
				<button style="width: 100%;height: 120%;" @click="add()" v-show="data.state==1">添加</button>
			</p>
		</div>
	</div>
</template>

<script setup>
	
	import { onMounted, reactive } from 'vue'
	import router from '@/router'
	import logo from '@/assets/logo.png';
	import { ref } from 'vue';
	import {$get,$postf} from '@/ajax';
	import { useRoute } from 'vue-router';
	import store from '../../../store';

	const route = useRoute();
	//构建容器初始化存储提交上传缓存空间
	const img = ref(null);
	
	const data = reactive({
		stu: {clz:{clzno:0}},
		actmsg: ['修改', '添加', '显示'],
		clzs:[],
		state: -1
	})
	
	const back = () => {
		router.push('/adm/showStu')
	}
	
	const pic = (id) => {
		let pic = `http://127.0.0.1:9000/api/public/showimg/` + id;
		if (id == undefined || id == "") {
			pic = logo;
		}
		return pic;
	}
	
	const go2Add = () => {
		data.state = 1;
		data.stu = {
			uid: 0,uname:'',phone:'',pwd:'',pic:'',clz:{clzno:0}
		}
	}
	
	const add = () => {
		//设置FormData格式数据
		let fd = new FormData;
		fd.append("uid", 0);
		fd.append("uname", data.stu.uname);
		fd.append("phone", data.stu.phone);
		fd.append("pwd", data.stu.pwd);
		fd.append("clz.clzno",data.stu.clz.clzno);
		//获取图片信息
		let file = img.value.files[0];
		fd.append("mypic", file);

		$postf(`/api/adm/stu/add`, fd).then((resp) => {
				store.state.msg = " 提示：添加成功"
				data.tea = resp.data.data
				data.state=2					
			}
		)

	}
	
	const  update = () => {
		//设置FormData格式数据
		let fd = new FormData;
		fd.append("uid", data.stu.uid);
		fd.append("uname", data.stu.uname);
		fd.append("phone", data.stu.phone);
		fd.append("pwd", data.stu.pwd);
		fd.append("pic", data.stu.pic);
		fd.append("clz.clzno",data.stu.clz.clzno);
		
		//获取图片信息
		let file = img.value.files[0];
		fd.append("mypic", file);

		$postf(`/api/adm/stu/update`, fd).then((resp) => {
				store.state.msg = " 提示：修改成功"
				data.tea = resp.data.data
				data.state=2
			}
		)
	}
	
	onMounted(() => {
		$get(`/api/adm/clz/findAll/`)
		.then((resp) => {
			console.dir(resp.data.data)
			data.clzs = resp.data.data
		})
		
		let id = route.query.uid;
		
		
		console.log(id)
		//id不等于0，则为修改
		if (id != "0"){
			$get(`/api/adm/stu/findById/`+id)
			.then((resp) => {
				console.dir(resp.data.data)
				data.stu = resp.data.data
				data.state = 0
			})
		}
		//id等于0，则为修改
		if (id == "0") { //
			data.stu = {
				uid: 0,uname:'',phone:'',pwd:'',pic:'',clz:{clzno:0}
			};
			data.state = 1;
		}
	})
	
</script>

<style>
</style>
